<template>
  <view>
    <view
      class="cc-flex cc-justify-between cc-items-center cc-absolute"
      :style="{
        width: 'calc(100%)',
        height: height + 'px',
        marginTop: boundingTop + 'px',
      }"
    >
      <view class="box-width cc-flex cc-items-center cc-ml-14">
        <img
          style="width: 48rpx; height: 48rpx"
          src="https://ai.mojudianzisw.com/static/img/shop/ai/left.png"
          alt=""
          @click="$goBack(1)"
        />
      </view>
      <view class="box-width cc-flex cc-items-center cc-justify-center">
        <text
          style="font-size: 36rpx; font-weight: bold; color: #232323"
          class="cc-ml-4"
          >AI画图</text
        >
      </view>
      <view class="box-width"></view>
    </view>

    <view
      class="content-box"
      :style="{ marginTop: boundingTop + height + 30 + 'px' }"
    >
      <view style="color: #180000; font-size: 28rpx; font-weight: 400"
        >给我一段文字，我就能为您绘出一副图哦~</view
      >
      <view
        style="
          color: #999999;
          font-size: 28rpx;
          font-size: 28rpx;
          margin-top: 10rpx;
        "
        >(每次生成一张)</view
      >
      <view class="text-box">
        <u--textarea
          customStyle="background:#F8F8F8"
          v-model="value"
          placeholder="输入文本输入文本输入文本..."
          border="none"
          height="180"
          class="custom-bg-color"
          maxlength="300"
        ></u--textarea>
      </view>
      <view class="button-content" @click="open"> 支付0.5元开始绘图 </view>
    </view>

    <u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
      <view class="popup-content">
        <view class="popup-content-img">
          <img
            style="width: 460rpx; height: 314rpx"
            src="https://ai.mojudianzisw.com/static/img/shop/ai/zfbg.png"
            alt=""
          />
        </view>
        <view class="popup-content-text"> 支付成功即可开始绘图 </view>
        <view class="popup-content-button" @click="payWechat">立即支付</view>
        <!-- payWechat  $navigateTo(`/pages/aiimage/createimg?value=${value}`) -->
        <view class="popup-content-nopay" @click="close">暂不支付</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import setMarginTop from "@/mixins/setMarginTop"; // 引入 mixin
import { createOrder } from "@/api/index.js"; // 引入 api
export default {
  mixins: [setMarginTop], // 使用 mixin
  data() {
    return {
      value: "",
      show: false,
    };
  },
  methods: {
    async payWechat() {
      const data = await createOrder({
        // openId: uni.getStorageSync("openId"),
        orderType: "TEXT",
      });
      console.log(data);
      const that = this;
      if (data.code == 200) {
        uni.requestPayment({
          provider: "wxpay", // 支付宝 provider 使用 wxpay
          timeStamp: data.info.timeStamp, // 时间戳
          nonceStr: data.info.nonceStr, // 随机字符串
          package: data.info.packageVal, // 预支付交易会话标识
          signType: data.info.signType, // 签名方式
          paySign: data.info.paySign, // 签名
          success(res) {
            console.log("支付成功:", res);
            uni.showToast({
              title: "支付成功",
              icon: "success",
            });
            console.log('==========', that.value);
            that.show = false;
            uni.navigateTo({
              url: `/pages/aiimage/createimg?value=${that.value}`,
            });
          },
          fail(err) {
            console.error("支付失败:", err);
            uni.showToast({
              title: "支付失败",
              icon: "none",
            });
          },
        });

        uni.setStorageSync("timeStamp", data.info.timeStamp);
        uni.setStorageSync("nonceStr", data.info.nonceStr);
        uni.setStorageSync("packageVal", data.info.packageVal);
        uni.setStorageSync("signType", data.info.signType);
        uni.setStorageSync("paySign", data.info.paySign);
      }
    },
    close() {
      this.show = false;
    },
    open() {
      console.log(this.value)
      if (!this.value) {
        uni.showToast({
          title: '请先输入文字。',
          icon: 'error'
        })
        return;
      } else {
        this.show = true;
      }
      
    },
  },
};
</script>

<style lang="scss" scoped>
.box-width {
  width: 200rpx;
  height: 100%;
}

.content-box {
  width: calc(100%);
  min-height: 300rpx;
  height: auto;
  // border: 1px solid black;
  margin-top: 40rpx;
  position: absolute;
  padding: 0 60rpx;
}

.text-box {
  width: 100%;
  height: 370rpx;
  border-radius: 16rpx;
  // padding: 16rpx;
  margin-top: 30rpx;
}

.button-content {
  width: 100%;
  height: 88rpx;
  background: #f56364;
  box-shadow: inset 0rpx 8rpx 12rpx 0rpx #ffafb0;
  border-radius: 72rpx;
  color: #fff;
  text-align: center;
  line-height: 88rpx;
  margin-top: 466rpx;
}
.popup-content {
  width: 586rpx;
  min-height: 638rpx;
  &-img {
    width: 100%;
    height: 314rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
  }
  &-text {
    width: 100%;
    display: flex;
    justify-content: center;
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
    margin-top: 28rpx;
  }
  &-button {
    width: calc(100% - 72rpx);
    height: 90rpx;
    border-radius: 180rpx;
    background: #f56364;
    box-shadow: inset 0rpx 8rpx 12rpx 0rpx #ffafb0;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    margin: 0 36rpx;
    margin-top: 54rpx;
  }
  &-nopay {
    width: 100%;
    text-align: center;
    font-weight: 500;
    font-size: 32rpx;
    color: #f56364;
    margin-top: 38rpx;
    padding-bottom: 20rpx;
  }
}
</style>
